<!DOCTYPE html>
<!--
  HTML bootstrap.
  Author: ccalo@google.com (Chris Calo)
  -->
<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi: Display Network Summary</title>
    <meta name="description" content="Pendar Yousefi's work on Project Compass" />
    <meta name="author" content="pendar@google.com (Pendar Yousefi)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
    <script src="/js/WallopSlider.js"></script>
  </head>
  <body class="dtt">
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
        
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="project-details" class="dtt">
        <header>
          <h6>display network summary tab</h6>
          <h2>What if display network advertising was easier to understand?</h2>
          <br/>

          <div class="credits cf">
            <ul class="team">
              <li><strong>UX Lead:</strong> Pendar Yousefi</li>
              <li><strong>PM:</strong> Ash Ahluwalia</li>
              <li><strong>TL:</strong> Dawn Chamberlain</li>
              <li><strong>UER:</strong> Corinne Longman</li>
              <li><strong>ED:</strong> Roxanne Pinto</li>
            </ul>
            <div class="meta">
              <span class="size xl"><strong>  Size:</strong> XL <em class="bars"><i></i><i></i><i></i><i></i></em></span>
              <span class="impact xl"><strong> Impact:</strong> Critical <em class="bars"><i></i><i></i><i></i><i></i></em></span>
            </div>
          </div>
          <div class="links">
            <a href="https://docs.google.com/a/google.com/document/d/1-kDKgw68DA32GrlSxJMzz1m38hi6q01ybVuRyiAvLgo/edit#"><img src="/img/icon_doc.svg"> PRD</a>
            <a href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_archive"><img src="/img/icon_design.svg"> Design <br/> archives </a>
            <a href="http://go/dtt-proto"><img src="/img/icon_code.svg"> Protoytpe </a>
            <a href="#"><img src="/img/icon_presentation.svg"> Usability<br/>  study</a>
            <a href="https://pendar.googleplex.com/dtt-uxr/"><img src="/img/icon_presentation.svg"> UX Review  </a>
          </div>
        </header>
        <article class="value">
          <hgroup>
          <span class="underlay">5B</span>
            <h6>Motivation</h6>
            <p class="lead"> Before this project, display advertisers - a $5B+ annual revenue business - had to visit seven different pages in AdWords to access their campaign targeting performance. 
          </hgroup>
        </article>
        <article class="value">
          <h6>my role</h6>
          <h2> Leading UX</h2>
          <p class="colz-2"> As the UX lead on this project, I designed a new summary page that visualizes advertisers' Display Network campaign activity and helps them see important insights. <br/><br/> As the first AdWords project that uses card-based designs, it gave me an opportunity to define the <a class="simple"  href="https://adwords-ux.googleplex.com/hig/#page=cards">human interface guidelines for using cards</a> across all of AdWords. </p>
        </article>
        <article class="process right cf">
          <hgroup>
            <h6>Process</h6>
            <h3> Wireframes </h3>
            <p> The problem we were trying to solve was large and open-ended. Before a PRD was even put together, I started creating a series of wireframes showing different types of summary cards using a card-based UI. These designs helped drive the early discussions with various stakeholders and created a product vision. <a href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_archive/v2" target="_blank" class="simple">View wireframes in folio </a></p>

          </hgroup>
          <img src="/img/dtt/wireframes.png">
        </article>
        <article class="process left cf" style="padding-bottom:200px;">
          <hgroup>
          <h6>Process</h6>
          <h3> UI/UX & visual design </h3>
          <p>After iterating on wireframes, I continued the card-based dashboard UI and iterated through several rounds of visual designs and prototypes, arriving at a final summary page that makes it significantly easier for advertisers to understand their  campaigns.  <br>
            <a class="simple" href="http://go/dtt-proto">Final html prototype</a><br>
            <a class="simple" href="http://go/dtt-uer">Usability test report</a>
          </p>
          </hgroup>

          <div class="wallop-slider wallop-slider--fade">
            <ul class="wallop-slider__list">
              <li class="wallop-slider__item wallop-slider__item--current">
                <div class="img-wrapper">
                  <img src="/img/dtt/1.png">
                </div>
                <p> <strong>Version 1</strong>:trying different card types and verifying the most useful cards through usability testing (<a class="simple" href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_usability/test1#%2F1.png" target="_blank">see designs in folio</a>)</p>
              </li>
              <li class="wallop-slider__item">
                 <div class="img-wrapper">
                  <img src="/img/dtt/2.png">
                </div>
                <p> <strong>Version 2</strong>: Using results from the first usability tests, we simplified and refined the cards and ran another usability test (<a class="simple" href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_usability/test2/tab1#%2F0_3%20Campaign.png" target="_blank">see designs in folio</a>)</p>
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/dtt/3.png">
                </div>
                <p> <strong>Version 3</strong>: Based on usability test results from version 2, we decided to only focus on Targeting cards. (<a class="simple" href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_usability/test3#%2F0-02.png" target="_blank">see designs in folio</a>)</p>
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/dtt/4.png">
                </div>
                 <p> <strong>Version 3</strong>: Here is a different view from the final set of designs (<a class="simple" href="https://folio.googleplex.com/awux/adwords/display-misc/summary-tab/_usability/test3#%2F0-02.png" target="_blank">see designs in folio</a>)</p>
              </li>
            </ul>
            <button href="javascript:;" class="btn_prev wallop-slider__btn wallop-slider__btn--previous" disabled="disabled">‹</button>
            <button href="javascript:;"  class="btn_next wallop-slider__btn wallop-slider__btn--next">›</button>
          </div>


        </article>
        <article class="process middle">
          <hgroup>
            <h6>Usability</h6>
            <h3> User feedback </h3>
            <p> Here is how some usability participants reacted to the new designs</p>

          </hgroup>
          <div class="quotes cf">
            <div><p>
              "A better visual representation of information that’s already available."</p>
            </div>
            <div>
              <p>"Nice. Lovely actually."</p>
            </div>
            <div><p>
              "Your design team actually deserves a lot of credit, it looks really nice."</p>
            </div>
          </div>
        </article>
        <article class="process">
          <a class="btn" href="http://go/dtt-proto" target="_blank">
            See live prototype 
          </a>
        </article>

      </section>
    </section>
   <div class="wrapper">
   </div>
  </body>
  
  <script>
  $(document).ready(function(){

   
    var slider = new WallopSlider('.wallop-slider');

    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
